<template>
	<view class="wrapper">
		<view class="content">
			<view class="logo">
				<image src="../../static/images/logo.png"></image>
			</view>
			
			<!-- <view class="navber">
				<u-tabs  name="cate_name"
				:list="list" 
				:is-scroll="false"
				:current="current"
				 @change="change"
				 active-color="#f10000"
				 inactive-color="#333333"
				 ></u-tabs>
			</view> -->
			
			<view class="tab-cont">
				<form @submit="formLogin">
				<view class="inp-wrap">
					<view class="inp-item">
						<view class="inp-icon">
							<image src="../../static/images/user-icon.png"></image>
						</view>
						
						<view class="inp-box">
							<input type="text" name="account" placeholder="请输入用户账号" placeholder-class="plass" />
						</view>
					</view>
					
					<view class="inp-item">
						<view class="inp-icon">
							<image src="../../static/images/lock-icon.png"></image>
						</view>
						
						<view class="inp-box">
							<input :type="inputType" name="password" placeholder="请输入密码" placeholder-class="plass" />
						</view>
						
						<view class="password-icon" v-if="eye"   @click="showPassword()">
							<image src="../../static/images/eye-icon.png"></image>
						</view>
						<view class="password-icon" v-else  @click="showPassword()">
							<image src="../../static/images/eye-icon01.png"></image>
						</view>
					</view>
				
				</view>
				<button class="logIn-btn" formType="submit" >登录</button>
				
				<view class="radio-wrap">
					<label>
						<checkbox :checked="flag" @click="flagChange"  />
						<view class="deal-p">我已阅读并同意</view>
					</label>
					
					<view class="deal-text" @click="link">《用户隐私条款》</view>
				</view>
				</form>
			</view>
			
		</view>
		
	</view>
</template>

<script>
	var  graceChecker = require("../../common/graceChecker.js");
	export default {
		data() {
			return {
				uname:'',
				eye: false,
				inputType: 'password',
				phonetoken:'',
				flag: false,
				
				list: [
					{cate_name: '密码登录'},
					{cate_name: '快捷登录'}
				],
				current: 0,
				loadinga: false,
				countDownNum: 60,
				timer: null,
				yzmText: "获取验证码",
				btnTemp: false,
			}
		},
		onLoad() {
			setTimeout(() => {
				this.animation = true
			}, 600)
		},
		methods: {
			inputUname:function(e){
				this.uname = e.detail.value;
			},
			flagChange:function(){
				this.flag = !this.flag;
			},
			
			//账号密码登陆
			formLogin:function(e){
				var that = this;
				if(this.flag==true){
					var data = e.detail.value;
					var rule = [
						{name:"password", checkType : "string", checkRule:"6,32",  errorMsg:"密码长度应为6~32位"}
					];
					var checkRes = graceChecker.check(data,rule);
					if(checkRes){
						that.$api.WaitModel('正在提交...');
						uni.request({
							url: that.$websiteUrl + '/index.php/Store/login/login.html', 
							data: data,
							method:'POST',
							dataType:'json',
							header: {'content-type' : 'application/x-www-form-urlencoded'},
							success: (resa) => {
								that.$api.HideWaitModel();
								var one = resa.data;
								if(one.status==200){
									if(one.data){
										uni.setStorageSync('store_id',one.data.store_id);
										uni.setStorageSync('storeMsg',JSON.stringify(one.data))
										that.$api.successMsg(one.message);
										setTimeout(function () {
											uni.switchTab({
											    url: '../index/index'
											});
										}, 2000);
									}else{
										that.$api.errorMsg(one.message);
									}
								}else{
									that.$api.errorMsg(one.message);
									var timer = setTimeout(()=>{
										this.loadinga = false;
									},1000);
								}
							},
							fail: (resa) => {
								that.$api.HideWaitModel();
								that.$api.errorMsg('网络连接超时，请检查您的网络');
								setTimeout(function () {
									this.loadinga = false;
								}, 2000);
							}
						})
					}else{
						that.$api.errorMsg(graceChecker.error);
						setTimeout(function () {
							this.loadinga = false;
						}, 2000);
					}
				}else{
					uni.showToast({ title: '您好像还没有阅读并同意用户协议哦！请先同意一下下呗！', icon: 'none' });
				}
			},
			
			//账号密码登陆
			phoneLogin:function(e){
				var that = this;
				if(this.flag==true){
					var data = e.detail.value;
					var rule = [
						{name:"code", checkType : "string", checkRule:"4,6",  errorMsg:"请输入手机验证码"},
					];
					this.loadinga = true;
					var checkRes = graceChecker.check(data,rule);
					if(checkRes){
						that.$api.WaitModel('正在提交...');
						uni.request({
							url: that.$websiteUrl + '/index.php/Api/login/phonelogin.html', 
							data: data,
							method:'POST',
							dataType:'json',
							header: {'content-type' : 'application/x-www-form-urlencoded'},
							success: (resa) => {
								that.$api.HideWaitModel();
								var one = resa.data;
								
								if(one.status == 200){
									uni.setStorageSync('store_id',one.data.store_id);
									that.$api.successMsg(one.message);
									setTimeout(function () {
										uni.switchTab({
										    url: '../index/index'
										});
									}, 2000);
								
								}else{
									that.$api.errorMsg(one.message);
									setTimeout(function () {
										this.loadinga = false;
									}, 2000);
								}
							},
							fail: (resa) => {
								that.$api.HideWaitModel();
								that.$api.errorMsg('网络连接超时，请检查您的网络');
								setTimeout(function () {
									this.loadinga = false;
								}, 2000);
							}
						})
					}else{
						that.$api.errorMsg(graceChecker.error);
					
						setTimeout(function () {
							this.loadinga = false;
						}, 2000);
					}
				}else{
					uni.showToast({ title: '您好像还没有阅读并同意用户协议哦！请先同意一下下呗！', icon: 'none' });
				}
			},
			
			//点击图标  密码显示隐藏 切换
			showPassword() { /*密码显示 */
				var that = this;
				if (that.eye) {
					that.eye = false
					that.inputType = 'password'
				} else {
					that.eye = true
					that.inputType = 'text'
				}
			},
			link() {
				uni.navigateTo({
				    url: '/pages/user/privacy'
				});
			},
			link1() {
				uni.switchTab({
				    url: '/pages/index/index'
				});
			},
			
			change(index) {
				this.current = index;
			},
			getCode () {
				var that = this;
				var reg = /^1[0-9]{10,10}$/;
				var phone = this.uname;
				if(!reg.test(phone)){
					that.$api.errorMsg('请输入正确的手机号码');return;
				}else{
					
					if(that.countDownNum == 60){
						var data = {phone:phone,dotype:"login"};
						uni.request({
							url: that.$websiteUrl + '/index.php/Api/login/getPhoneCode.html', //获取手机验证码信息,
							data: data,
							method:'POST',
							dataType:'json',
							header: {'content-type' : 'application/x-www-form-urlencoded'},
							success: (resa) => {
								var one = resa.data;
								if(one.status == 200){
									that.phonetoken = one.data.token;
									
									that.btnTemp = true;
									that.yzmText = that.countDownNum + "s";
									this.timer = setInterval(() => {
										this.countDownNum--;
										that.yzmText = that.countDownNum + "s";
									
										if (this.countDownNum < 0) {
											clearInterval(this.timer);
											that.btnTemp = false;
											this.countDownNum = 60;
											that.yzmText = "获取验证码";
										}
									}, 1000);
								}else{
									that.$api.errorMsg(one.message);
									that.scode = false;
								}
								
							},
							fail:(resa)=> {
								that.$api.errorMsg('网络连接超时，请检查您的网络');
							}
						})
					}
				}
			},

		}
	}
</script>

<style lang="scss">
	@import url('../../common/common.css');
	
	.content {
		padding: 30upx 75upx;
	}
	.logo {
		margin: 50upx auto;
		width: 300upx;
		height: 108upx;
	}
	
	.navber {
		padding-right: 200upx;
	}
	.navber /deep/ .u-tab-bar {
		left: -34upx;
	}
	
	.inp-wrap {
		margin-bottom: 205upx;
		padding: 30upx 0;
		.inp-item {
			margin: 35upx 0 0;
			display: flex;
			align-items: center;
			line-height: 90upx;
			border-bottom: 1upx solid #dbdbdb;
			.inp-icon {
				margin-right: 24upx;
				width: 32upx;
				height: 36upx;
			}
			.inp-box {
				width: 505upx;
				height: 75upx;
				input {
					width: 100%;
					height: 100%;
					font-size: 30upx;
					color: #333;
				}
				.plass {
					font-size: 30upx;
					color: #999;
				}
			}
			.inp-on {
				width: 355upx;
			}
		}
	}
	.password-icon {
		width: 35upx;
		height: 21upx;
	}
	
	.radio-wrap {
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 28upx;
		color: #999;
		line-height: 75upx;
		.deal-text {
			color: #378be7;
		}
	}
	label {
		display: flex;
		align-items: center;
	}
	
	.radio-wrap /deep/ .uni-checkbox-input {
		border-radius: 50%;
	}
	.radio-wrap /deep/ uni-checkbox .uni-checkbox-input.uni-checkbox-input-checked {
		background: #f70000;
		color: #fff !important;
	}
	
	.logIn-btn {
		margin: 25upx 0;
		width: 100%;
		height: 90upx;
		background: #f70000;
		box-shadow: 0px 2upx 24upx 0px #fb5858;
		border-radius: 45upx;
		font-size: 36upx;
		text-align: center;
		line-height: 90upx;
		letter-spacing: 2px;
		color: #fff;
	}
	
	.gain-btn {
		padding: 0;
		margin: 0 0 0 43upx;
		font-size: 28upx;
		color: #f70000;
		border: none;
		outline: none;
		background: none;
	}
	button:after{
		display:none;
	}
	
	.signIn-btn {
		// position: absolute;
		// bottom: 80upx;
		// left: 315upx;
		font-size: 24upx;
		line-height: 75upx;
		letter-spacing: 1px;
		color: #666;
		text-align: center;
		line-height: 75upx;
	}
	
</style>
